<template>
  <div style="width: 100%; height: 100%" ref="target"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

// 1. 初始化 echarts 实例
let mChart = null;
const target = ref(null);
onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});

// 2. 构建 options 配置对象
const renderChart = () => {
  const options = {
    title: {
      text: "测评结果分布",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },

    series: [
      {
        name: "占比人数",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "正常" },
          { value: 735, name: "轻度抑郁" },
          { value: 580, name: "重度抑郁" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        color: ["#7171F8", "#FFF56D", "#F87171"],
      },
    ],
  };
  mChart.setOption(options);
};
</script>

<style lang="scss" scoped></style>
